<template>
	<view class="container">
		<view class="diygw-col-24">
			<view class="diygw-search">
				<view class="flex1 flex padding-xs solid radius">
					<text style="color: #555 !important" class="diy-icon-search"></text>
					<input class="flex1" name="search" type="" v-model="search" placeholder="请输入关键字" />
				</view>
				<view style="color: #333 !important" class="diygw-tag margin-left-xs radius-xs"> 搜索 </view>
			</view>
		</view>
		<view class="flex diygw-col-24 diygw-bottom">
			<view class="diygw-grid diygw-actions">
				<button class="diygw-action">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar">
							<image mode="aspectFit" class="diygw-avatar-img" src="/static/gh_d564d8ad2781_1280.jpg"></image>
						</view>
						<view class="diygw-grid-title"> 首页 </view>
					</view>
				</button>
				<button class="diygw-action">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar">
							<image mode="aspectFit" class="diygw-avatar-img" src="/static/grid2.png"></image>
						</view>
						<view class="diygw-grid-title"> 消息 </view>
					</view>
				</button>
				<button class="diygw-action">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar">
							<image mode="aspectFit" class="diygw-avatar-img" src="/static/grid3.png"></image>
						</view>
						<view class="diygw-grid-title"> 优选项目 </view>
					</view>
				</button>
				<button class="diygw-action">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar">
							<image mode="aspectFit" class="diygw-avatar-img" src="/static/grid4.png"></image>
						</view>
						<view class="diygw-grid-title"> 我的 </view>
					</view>
				</button>
			</view>
		</view>
		<view class="flex diygw-col-24">
			<diy-noticebar class="flex1 diy-notice-bar" color="#07c160" bgColor="#fff" leftIcon="diy-icon-notification">
				<!-- #ifndef VUE3 -->
				<block slot="content">
					<text class="diy-notice-item"> DIY官网做好的拖拽式可视化设计工具 </text>
				</block>
				<!-- #endif -->
				<!-- #ifdef VUE3 -->
				<block v-slot:content>
					<text class="diy-notice-item"> DIY官网做好的拖拽式可视化设计工具 </text>
				</block>
				<!-- #endif -->
			</diy-noticebar>
		</view>
		<diy-navbar bgColor="green" :isHome="true" :isBack="true">
			<!-- #ifndef VUE3 -->
			<block slot="backText"> 返回 </block>
			<block slot="content"> 标题 </block>
			<!-- #endif -->
			<!-- #ifdef VUE3 -->
			<template v-slot:backText> 返回 </template>
			<template v-slot:content> 标题 </template>
			<!-- #endif -->
		</diy-navbar>
				<view class="flex diygw-col-24">
						<swiper class="swiper" indicator-color="rgba(51, 51, 51, 0.39)" indicator-active-color="#fff" indicator-dots="true" autoplay interval="3000" circular="true" style="height: 150px">
							<swiper-item v-for="(item, index) in data.data.list" :key="picstr" class="diygw-swiper-item">
								<view class="diygw-swiper-item-wrap">
									<view class="diygw-swiper-item-title not-mask">
										{{ item.name_ }}
									</view>
								</view>
							</swiper-item>
						</swiper>
					</view>
			<view class="diygw-col-24"> 内容 </view>
		<view class="clearfix"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//用户全局信息
				userInfo: {},
				data: {
					code: '200',
					data: {
						count: 3,
						list: [
							{
								pic_: '[{"id":"434549814405103617","name":"WechatIMG124.jpeg"}]',
								status_: '启用',
								id_: '434549818926039041',
								url_: 'http://www.baidu.com',
								name_: '第一张图'
							},
							{
								status_: '1',
								id_: '435028127613452289',
								url_: 'http://www.baidu.com',
								name_: '第二张图'
							},
							{
								status_: '1',
								id_: '435028132000956417',
								url_: 'http://www.baidu.com22',
								name_: '第三张图'
							}
						]
					},
					isOk: true
				},
				search: ''
			};
		},
		onShow() {
			this.setCurrentPage(this);
		},
		onLoad(option) {
			this.setCurrentPage(this);
			if (option) {
				this.setData({
					globalOption: this.getOption(option)
				});
			}

			this.init();
		},
		methods: {
			async init() {
				await this.dataApi();
			},
			// 轮播图片 API请求方法
			async dataApi() {
				let data = await this.$http.post(
					'https://agent.diygw.com/',
					{
						url: '/form/formCustSql/view/liststr_imageList',
						method: 'post',
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded',
							'User-Agent': ''
						},
						param: '{"curPage":1,"pageSize":"10","params":{}}'
					},
					{
						'Content-type': 'application/json'
					},
					'json'
				);
				this.data = data;
			},

			// 新增方法 自定义方法
			async 新增方法Function(param) {
				let thiz = this;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		padding-left: 0px;
		padding-right: 0px;

		font-size: 12px;
	}
	.container {
		padding-bottom: 80px;
	}
</style>
